<template>
  <div class="essence-content-view">
    <div class="content-box">
      <div
        class="content-list-wrap"
        v-for="(item, index) in contentData"
        :key="item.id"
      >
        <VideoCom
          :allContentData="contentData"
          :scrollTop="scrollTop"
          :contentData="item"
          :isAutoplay="index == 0 ? true : item.isAutoplay"
          :loading="loading"
          :isFollow="item.isFollow"
          :isDislike="item.isDislike"
          :isLike="item.isLike"
          :index="index"
          @getVideoHeight="getVideoHeight($event)"
          @getFollowState="getFollowState(item)"
          @getLikeState="getLikeState(item)"
          @getDislikeState="getDislikeState(item)"
          @addShareCount="addShareCount(item)"
          @deleteData="deleteData(item)"
          @goTocomment="goTocomment(item)"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getHomeEssenceContent } from "../../api/home";
import VideoCom from "@/components/HomeCom/VideoCom.vue";

export default {
  name: "EssenceView",
  props: {
    scrollTop: {},
  },
  components: {
    VideoCom,
  },
  data() {
    return {
      //数据
      contentData: [],
      //总高度
      videoTotalHeight: 0,
      //加载状态
      loading: true,
      //刷新状态
      refreshState: false,
      //所有容器的单个高度
      videoHeightArr: [],
      //获取数据的id
      dataId: 0,
      //刷新时获取的数据
      refreshData: [],
      //定时器延迟拿取数据
      timer: null,
    };
  },
  created() {
    this.getHomeEssenceContentData(this.dataId);
  },
  activated() {
    //定时器延迟拿取数据
    this.timer = setTimeout(() => {
      this.getFollowedData();
      this.timer = null;
    }, 100);
  },
  watch: {
    scrollTop(newval, oldval) {
      let videoBottom = null;
      if (this.videoTotalHeight > newval) {
        videoBottom = this.videoTotalHeight - newval;
      }
      // console.log(newval);
      if (this.contentData.length > 0) {
        let autoplayIndex = Math.round(
          ((newval - 100 > 0 ? newval - 100 : 0) / this.videoTotalHeight) * 10
        );
        this.contentData.forEach((item, index) => {
          if (autoplayIndex == index) {
            item.isAutoplay = true;
          } else {
            item.isAutoplay = false;
          }
        });
      }
      if (
        (videoBottom > 0 && videoBottom < 500 && newval > oldval) ||
        videoBottom == null
      ) {
        if (this.loading) {
          this.loading = false;
          this.getHomeEssenceContentData(1);
        } else if (!this.loading && newval >= this.videoTotalHeight) {
          this.$toast({
            message: "没有更多了哦~",
            position: "bottom",
          });
        }
      }
      // console.log(this.contentData);
    },
    loading(newval) {
      if (newval == false) {
        this.videoTotalHeight = 0;
      }
    },
    "contentData.length"() {
      this.timer = setTimeout(() => {
        this.getFollowedData();
        this.timer = null;
      }, 100);
    },
  },
  methods: {
    //获取数据
    getHomeEssenceContentData(dataParams) {
      getHomeEssenceContent({ axios: this.$axios }, dataParams).then(
        ({ data }) => {
          // console.log(data.items);
          data.items.forEach((item) => {
            item["isAutoplay"] = false;
            item["isFollow"] = false;
            item["isLike"] = false;
            item["isDislike"] = false;
          });
          this.contentData.push(...data.items);
          // console.log(this.contentData);
        }
      );
    },
    //获取所有内容的高度
    getVideoHeight(val) {
      this.videoTotalHeight += val;
    },
    //关注
    getFollowState(item) {
      item.isFollow = !item.isFollow;
      let followedData = JSON.parse(
        window.localStorage.getItem("followedData")
      );
      let idArr = [];
      followedData.forEach((item) => {
        idArr.push(item.id);
      });
      if (item.isFollow && idArr.indexOf(item.user.id) == -1) {
        followedData.push(item.user);
        window.localStorage.setItem(
          "followedData",
          JSON.stringify(followedData)
        );
      } else {
        // console.log(followedData.indexOf(item.user));
        followedData.forEach((item2, index) => {
          if (item2.id == item.user.id) {
            followedData.splice(index, 1);
            window.localStorage.setItem(
              "followedData",
              JSON.stringify(followedData)
            );
          }
        });
      }
    },
    //点赞
    getLikeState(item) {
      item.isLike = !item.isLike;
      if (item.isLike) {
        item.isDislike = false;
        item.votes.up++;
      } else {
        item.votes.up--;
      }
    },
    //踩
    getDislikeState(item) {
      item.isDislike = !item.isDislike;
      if (item.isDislike && item.isLike) {
        item.isLike = false;
        item.votes.up--;
      }
    },
    //分享
    addShareCount(item) {
      item.share_count++;
    },
    //删除
    deleteData(item) {
      this.$dialog
        .confirm({
          title: "确定要删除吗?",
        })
        .then(() => {
          // on confirm
          this.contentData.forEach((item2, index) => {
            if (item2 == item) {
              this.contentData.splice(index, 1);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    //获取已关注
    getFollowedData() {
      let followedData = JSON.parse(
        window.localStorage.getItem("followedData")
      );
      let followedDataId = [];
      followedData.forEach((item) => {
        followedDataId.push(item.id);
      });
      this.contentData.forEach((item) => {
        if (followedDataId.indexOf(item.user.id) != -1) {
          item.isFollow = true;
        } else {
          item.isFollow = false;
        }
      });
    },
    //跳转评论详情页
    goTocomment(item) {
      window.localStorage.setItem("commentContentData", JSON.stringify(item));
      let dataId = item.id;
      if (dataId != 125654473 && dataId != 125657703) {
        dataId = 125654473;
      }
      this.$router.push(`/comment?id=${dataId}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.essence-content-view {
  width: 100%;
  margin-bottom: 50px;
  .content-box {
    width: 100%;
  }
}
</style>